<template>
  <div class="">
    <el-cascader v-model="list" :options="options" :props="cascaderProps" :placeholder="placeholder" filterable clearable @change="onChange"></el-cascader>
  </div>
</template>
<script>
import cityJson from "@/assets/json/area.json";
//import { GETREGIONTREELIST } from "@/http/common";
export default {
  name: "AreaSelect",
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    placeholder: {
      type: String,
      default: "请选择省市区",
    },
    checkStrictly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      options: cityJson,
      cascaderProps: {
        value: "code",
        label: "name",
        children: "children",
      },
    };
  },
  watch: {
    value: {
      handler: function (n, m) {
        this.list = n;
      },
      immediate: true,
    },
    checkStrictly: {
      handler: function (n, m) {
        this.$set(this.cascaderProps, "checkStrictly", n);
      },
      immediate: true,
    },
  },
  created() {
    // let list = this.$store.state.provinceList;
    // if (!list || list.length <= 0) {
    //   this.getList();
    // }
  },
  methods: {
    //
    onChange(e) {
      let list = this.options;
      let province = list.find(k => k.code == e[0]);
      let city = province.children.find(k => k.code == e[1]);
      let area = city.children.find(k => k.code == e[2]);
      this.$emit("input", e);
      this.$emit('change', [province.name, city.name, area.name])
      console.log([province.name, city.name, area.name])
    },

    // 获取省市区
    getList() {
      let _this = this;
      GETREGIONTREELIST().then((res) => {
        let list = res.data || [];
        _this.options = list;
        _this.$store.commit("SET_PROVINCE_LIST", list);
      });
    },
  },
};
</script>
<style lang="scss" scoped>

</style>